<template>
    <div class="all__body">
        <div class="title">历史对话</div>
        <div class="dilog__list">
            <div class="dialog__container" v-for="item, index in data_list" @dblclick="handleDoubleClick(item)">
                <div class="dialog__row">
                    <div class="dialog__name">
                        {{ item.history_list[0].content }}
                    </div>
                    <div class="dialog__time">
                        {{ item.create_time }}
                    </div>
                    <div class="dialog__del" @click="del_dialog(item)">
                       <span><svg-icon name="icon-shanchu" :size="15"></svg-icon></span>
                    </div>
                    
                </div>
            </div>
        </div>

        <div class="bottom__page" v-show="total>10">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="false"
            layout="prev, pager, next"
            
            :total="total"
            @current-change="handleCurrentChange"
          />  

      </div>
    </div>
 
</template>
           
<script setup>
    import { ref, onMounted } from "vue"
    import 'vue-waterfall-plugin-next/dist/style.css'
    import { getDialogList, delDialogList } from '@/api/homeApi.js'
    import MessageBox from '@/utils/MessageBox';

    const props = defineProps(['message_type'])
    const emit = defineEmits(['handleDoubleClick'])

    const data_list = ref()
    const total = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(10)
    // 获取记录
    const get_dialog_list = async () =>{
    var req_data = {
           agent_type: props.message_type, // 'Agent',
           page: currentPage.value,
            page_size: pageSize.value
        }

        var res = await getDialogList(req_data)
        data_list.value = res.data.list
        total.value = res.data.total
    }

    const handleCurrentChange = (newPage)=>{
        currentPage.value = newPage
        get_dialog_list()
    }

    // 双击
    const handleDoubleClick = (dialog)=>{

        emit('handleDoubleClick', dialog)
    }   

    // 删除
    const del_dialog = (item)=>{
        const del_func = async ()=>{
            console.log('执行删除')
            var req_data = {
            id: [item.id],
            
        }
        var res = await delDialogList(req_data)

        if (total.value>1){
            currentPage.value = Math.ceil(total.value / pageSize.value)
        }

        get_dialog_list()
        }
        MessageBox.confirm("确认永久删除对话？此操作不可逆，数据将无法恢复。", del_func, null, null, "是否删除", "删除", "取消")
    }

    onMounted(()=>{
        get_dialog_list()
    })
    
</script>
<style scoped lang="scss">
.all__body{
    height: 100%;
    width: 100%;
    text-align: left;
    .title{
        text-align: center;
    }

    .dilog__list{
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
        .dialog__container{
            width: 100%;
            height: 50px;
            padding: 10px;
            border: solid 1px var(--wchime-color-border);
            border-radius: 8px;

            .dialog__row{
                display: flex;
                height: 100%;
                align-items: center;
                user-select: none;
                .dialog__name{
                    width: calc(100% - 140px);
                    font-size: 14px;
                    padding-right: 5px;
                    white-space: nowrap;   // 防止文本换行
                    overflow: hidden;      // 隐藏溢出的文本
                    text-overflow: ellipsis; // 显示省略号
                }

                .dialog__time{
                    width: 120px;
                }
                .dialog__del{
                    cursor: pointer;
                    width: 20px;
                    display: flex;
                    align-items: center;
                    align-content: center;
                    justify-content: center;
                }
                .dialog__del:hover{
                    color: red;
                }
            }
        }
        .dialog__container:hover{
            background-color: var(--wchime-color-hover);
        }

    }

    .bottom__page{
        display: flex;
        justify-content: center;
    }

}
</style>